<template>
  <div class="app-container">
    <div class="problem-content">
      <div class="problem-base-info">
        <img
          :src="
            models.model.authorPhotoUrl
              ? '/dev-api/attachment/down/' + models.model.authorPhotoUrl
              : defaultAvatar
          "
          class="avatar"
        />
        <div class="problem-author-info">
          <span class="mb10">{{ models.model.createUserName }}</span>
          <span>发布：{{ models.model.createTime }}</span>
        </div>
      </div>
      <div class="problem-box">
        <div class="problem-title">{{ models.model.problemTitle }}</div>
        <el-divider class="mg0"></el-divider>
        <div
          v-html="models.model.problemDescribe"
          class="problem-describe"
        ></div>
        <el-divider class="mg0"></el-divider>
      </div>
    </div>

    <div class="reply-content">
      <template>
        <div class="reply-count-box">
          <span class="reply-count">{{ query.recordsTotal }}个回复</span>
        </div>
        <div v-if="query.recordsTotal > 0" class="reply-describe">
          <template v-for="(item, index) in query.data">
            <tree-item
              :node="item"
              :key="item.replyId"
              :problemId="item.problemId"
              :rootReplyId="item.replyId"
              :isRootNode="true"
              :rootNodeIndex="index"
            ></tree-item>
            <el-divider :key="item.replyId" class="mtb10"></el-divider>
          </template>
        </div>
      </template>
      <el-empty
        v-if="!(query.recordsTotal > 0)"
        description="暂无数据"
      ></el-empty>
    </div>

    <vxe-pager
      v-if="(query || {}).recordsTotal > 0"
      :current-page="query.startIndex"
      :page-size="query.pageSize"
      :total="query.recordsTotal"
      @page-change="onPageChange"
      :pageSizes="[5, 10, 20, 50, 100]"
    ></vxe-pager>

    <div class="problem-reply">
      <div class="author-info mb20">
        <img :src="avatar" class="avatar" />
        <span class="ml20">{{ name }}</span>
      </div>
      <div class="problem-reply-content">
        <el-form
          ref="problemReplyFormRef"
          :model="problemReplyModel"
          :rules="problemReplyModelRules"
        >
          <el-form-item prop="replyDescribe">
            <editor
              v-model="problemReplyModel.replyDescribe"
              :min-height="192"
            />
          </el-form-item>
          <div class="flex-row-end">
            <el-button type="success" @click="onReply">回复</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Editor from "@/components/Editor";
import Controller from "@/libs/framework/controller";
import TreeItem from "./treeItem";
import { mapGetters } from "vuex";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/marketAppProblem/getEntity",
      query: "/eip/marketAppReply/query",
    };
  }
  onBeforeQuery(type, conditions, params) {
    if (type === "list") {
      const problemId = this.vm.$route.query.problemId;
      this.vm.currentProblemId = problemId;
      params.query.problemId = problemId;
    }
  }

  mixin() {
    return {
      components: {
        Editor,
        TreeItem,
      },
      computed: {
        ...mapGetters(["avatar", "name"]),
      },
      data() {
        return {
          dialogVisible: false,
          defaultAvatar: require("@/assets/images/profile.png"),
          currentProblemId: undefined,
          problemReplyModel: {
            problemId: undefined,
            replyDescribe: undefined,
          },
          problemReplyModelRules: {
            replyDescribe: [
              {
                required: true,
                message: "回复不能为空",
                trigger: "change",
              },
            ],
          },
        };
      },
      methods: {
        onReply() {
          this.problemReplyModel.problemId = this.currentProblemId;
          this.$refs["problemReplyFormRef"].validate((valid) => {
            if (valid) {
              const appLoading = this.appLoading("数据提交中...");
              request({
                url: "/eip/marketAppReply/save",
                method: "post",
                data: {
                  model: this.problemReplyModel,
                },
              })
                .then((res) => {
                  const { success, message } = res;
                  if (success) {
                    this.problemReplyModel.replyDescribe = undefined;
                    this.msgSuccess("回复成功！");
                    this.refreshReplyHandle();
                  } else {
                    this.msgError(message || "回复失败！");
                  }
                })
                .finally(() => {
                  appLoading.close();
                });
            }
          });
        },
        refreshReplyHandle() {
          const { startIndex, pageSize } = this.query || {};
          this.fetchData(
            { start: (startIndex - 1) * pageSize, length: pageSize },
            "list",
            false
          );
        },
        onPageChange({ currentPage, pageSize }) {
          this.fetchData({
            start: (currentPage - 1) * pageSize,
            length: pageSize,
          });
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  overflow: auto;
}
img {
  border-radius: 5px;
}
.problem-content {
  .problem-base-info {
    border-radius: 6px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    color: #666;
    padding: 20px;
    font-size: 14px;
    background: #f7f7f6;
    .problem-author-info {
      margin-left: 10px;
      display: flex;
      flex-flow: column nowrap;
    }
  }
  .problem-box {
    .problem-title {
      font-size: 20px;
      margin: 10px 0px;
    }
    .problem-describe {
      font-size: 14px;
      color: #666;
      padding: 10px;
    }
  }
}

.reply-content {
  .reply-count-box {
    display: flex;
    flex-flow: row nowrap;
    padding: 15px 0;
    .reply-count {
      font-size: 16px;
      color: #161616;
      border-bottom: 2px solid #22ac38;
      padding-bottom: 6px;
    }
  }
}

.problem-reply {
  .author-info {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .problem-reply-content {
    background: #f7f7f7;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .ql-toolbar.ql-snow + .ql-container.ql-snow {
    background: #ffffff;
  }
}
.flex-row-end {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
.mg0 {
  margin: 0;
}
.ml20 {
  margin-left: 20px;
}
.avatar {
  width: 60px;
  height: 60px;
}
.mtb10 {
  margin: 10px 0px;
}
::v-deep .el-form-item__error {
  top: 112%;
}
</style>
